<template>
    <div>
        <el-table
            :data="data"
            border
            :height="height"
            :summary-method="getSummaries"
            :show-summary="showSummary"
            :header-cell-style="{ color: '#333333', background: '#f5f5f5' }"
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
        >
            <el-table-column
                v-for="(item, index) in config"
                :key="`tableConfig${index}`"
                :label="item.label"
                :prop="item.prop"
                :show-overflow-tooltip="item.showTips"
                :width="item.width"
            >
                <template slot-scope="scope">
                    <div v-if="item.type == 'radio'">
                        <label class="radio">
                            <input type="radio" value="2" :data-index="scope.$index" name="orderId" />
                            <span class="dot"></span>
                        </label>
                    </div>
                    <div v-else-if="item.type === 'select'">
                        <el-select
                            v-model="scope.row[item.prop]"
                            clearable
                            :placeholder="scope.row[item.label]"
                            :style="`width:${(item.width || 190) - 20}px;`"
                            size="small"
                        >
                            <el-option
                                v-for="item in scope.row.options"
                                :label="item"
                                :value="item"
                                :key="item.gradeId"
                            ></el-option>
                        </el-select>
                    </div>
                    <div v-else-if="item.type === 'input'">
                        <el-input
                            v-model="scope.row[item.prop]"
                            type="'text'"
                            :style="`width:${(item.width || 190) - 20}px;`"
                            :disabled="item.disabled"
                            @input="val => item.change && item.change(val, scope)"
                            autocomplete="off"
                            :placeholder="item.label"
                            size="small"
                        ></el-input>
                    </div>
                    <template v-else-if="item.formatter">{{ item.formatter(scope.row[item.prop]) }}</template>
                    <template v-else>{{ scope.row[item.prop] }}</template>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="pagination.current"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pagination.pageSize"
            layout="->,prev, pager, next, jumper, sizes,total"
            :total="pagination.totalSize"
        ></el-pagination>
    </div>
</template>

<script>
import BaseTable from './BaseTable.js';
export default BaseTable;
</script>

<style lang="less" scoped>
@import 'BaseTable.less';
</style>
